<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>translate</title>
    </head>
    
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            margin: auto;
            border: 1px solid red;
            /* 变换过程的设置 */
            transition: all 0.5s;
        }
        .box1:hover {
            /* 放大、缩小 */
            /* transform: scale(1.2); */
            /* 平移 */
            transform: translateX(10px);
            /* 旋转 */
            /* transform: rotate(10deg); */
            box-shadow: 0px 0px 10px green;
        }
    </style>
    
    <body>
        
        <div class="box1">
            
        </div>
        
    </body>
</html>